<style scoped>
.active {
  border: 1px solid red;
}
</style>
<template>
  <div class="demo-content">
    <h1>编辑器</h1>
    <section class="demo-text">
      <el-row>
        <el-col :span="18">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="drawType('Line')"
            :class="drawActive('Line')"
          >线</el-button>
          <el-button
            type="primary"
            icon="el-icon-share"
            @click="drawType('Circle')"
            :class="drawActive('Circle')"
          >圆</el-button>
          <el-button
            type="primary"
            icon="el-icon-delete"
            @click="drawType('Rect')"
            :class="drawActive('Rect')"
          >矩形</el-button>
          <el-button @click="del">删除</el-button>
          <canvas id="canvas" width="1200" height="600" ref="canvas"></canvas>
        </el-col>
        <el-col :span="4">
          <el-form ref="form" :model="itemAttribute" label-width="80px">
            <el-form-item label="背景颜色:">
              <el-color-picker v-model="itemAttribute.fill" show-alpha @change="AttrChange"></el-color-picker>
            </el-form-item>
          </el-form>
          <div v-if="activeobject">
            <div class="block" v-for="item,index in dataobject" :key="'o'+index">
              <span class="demonstration">{{item.type}}</span>
              <el-input v-model="item.value" @input="handlechange" :step="item.step"></el-input>
              <span style="float:right">{{item.value}}</span>
              <!-- <input type="range" v-model="item.value" :min="item.min" :max="item.max" @input="handlechange" :step="item.step"> -->
            </div>
            <el-input
              v-for="item in attrlist"
              v-model="item.value"
              placeholder="请输入内容"
              @change="changeLabel"
              :key="item.value"
            ></el-input>
          </div>
        </el-col>
      </el-row>

      <h2>说明</h2>
      <p>使用fabric实现编辑器功能</p>
      <p style="text-align:right;padding-right:60px">@王睿杰 2019.4.24</p>
    </section>
  </div>
</template>
<script>
import { fabric } from "@/js/fabric";
export default {
  data() {
    return {
      canvas: null,
      type: null,
      drawing: false,
      activeobject: null,
      drawTarget: null,
      drawStart: null,
      itemAttribute: {
        fill: "red"
      },
      attrlist: [
        {
          key: "label",
          value: ""
        }
      ],
      dataobject: [
        {
          type: "angle",
          value: 0,
          min: 0,
          max: 360,
          step: 10
        },
        {
          type: "left",
          value: 0,
          min: 0,
          max: 1200,
          step: 10
        },
        {
          type: "top",
          value: 0,
          min: 0,
          max: 600,
          step: 10
        },
        {
          type: "scaleX",
          value: 0,
          min: 0.1,
          max: 3,
          step: 0.1
        },
        {
          type: "scaleY",
          value: 0,
          min: 0.1,
          max: 3,
          step: 0.1
        }
      ]
    };
  },
  methods: {
    del() {
      let _this = this;
      if (!!_this.activeobject) {
        _this.canvas.remove(_this.activeobject);
        _this.activeobject = null;
      }
    },
    changeLabel(value) {
      let _this = this;
      _this.activeobject.set("label", value).setCoords();
      _this.canvas.requestRenderAll();
    },
    AttrChange(value) {
      this.activeobject && this.activeobject.set("fill", value).setCoords();
      this.canvas.renderAll();
    },
    handlechange(value) {
      let _this = this;
      //   if(!_this.activeobject){
      //       return;
      //   }
      this.dataobject.forEach(function(item) {
        _this.activeobject
          .set(item.type, parseFloat(item.value, 10))
          .setCoords();
      });
      _this.canvas.requestRenderAll();
    },
    drawActive(type) {
      return this.type == type ? "active" : "";
    },
    drawType(type) {
      this.type = type;
      this.activeobject = null;
      this.canvas.discardActiveObject();
    }
  },
  watch: {
    deep: true,
    activeobject(newvalue, oldvalue) {
      if (!newvalue) {
        return;
      }
      console.log(newvalue,"sss")
      let key = newvalue || {};
      for (let k in this.itemAttribute) {
        this.itemAttribute[k] = newvalue[k];
      }
      this.dataobject.map(function(item) {
        item.value = parseFloat(key[item.type], 10);
        // console.log(key, "sssssss");
        // return item;
      });
      this.attrlist.map(function(item) {
        item.value = key[item.key];
      });
    },
    drawing(newvalue, oldvalue) {
      this.canvas.isDrawingMode = newvalue;
    }
  },
  mounted() {
    let panning = false;
    let _this = this;
    this.$nextTick(() => {
      var canvas = (_this.canvas = new fabric.Canvas("canvas"));
      // 添加图形实例


      //鼠标按下
      canvas.on("mouse:down", function(e) {
        //按住alt键才可拖动画布
        // if (!e.target) {
        //   panning = true;
        //   canvas.selection = false;
        // }
        if (_this.type) {
          _this.drawing = true;
          _this.activeobject = null;
          panning = false;
          canvas.selection = false;
          _this.drawStart = e.pointer;
          _this.drawTarget = new fabric["Rect"]({
            top: e.pointer.y,
            left: e.pointer.x,
            width: 0,
            height: 0,
            fill: _this.itemAttribute.fill
          });
          canvas.add(_this.drawTarget);
        } else {
          _this.activeobject = e.target;
        }
      });
      //鼠标抬起
      canvas.on("mouse:up", function(e) {
        panning = false;
        canvas.selection = true;
        if (_this.type) {
          _this.drawTarget.set("width", e.pointer.x - _this.drawStart.x);
          _this.drawTarget.set("height", e.pointer.y - _this.drawStart.y);
          canvas.renderAll();
          _this.drawTarget.setCoords();
          _this.activeobject = null;
          _this.activeobject = _this.drawTarget;
          //   e.target.setCoords();
          _this.drawing = false;
          _this.drawTarget = null;
          _this.type = null;
        }
      });
      function drawBorder(el) {}
      //鼠标移动
      canvas.on("mouse:move", function(e) {
        if (_this.drawing && _this.type) {
          _this.drawTarget.set("width", e.pointer.x - _this.drawStart.x);
          _this.drawTarget.set("height", e.pointer.y - _this.drawStart.y);
          drawBorder(_this.drawTarget);
          canvas.renderAll();
          return;
        }
        if (panning && e && e.e) {
          var delta = new fabric.Point(e.e.movementX, e.e.movementY);
          canvas.relativePan(delta);
        }
        if (!e || !e.target) return;
        e.target.setCoords();
        canvas.forEachObject(function(obj) {
          if (obj === e.target) return;
          obj.set("opacity", e.target.intersectsWithObject(obj) ? 0.5 : 1);
        });
      });
      function updateControls(e) {
        _this.activeobject = null;
        _this.activeobject = e.target;
      }
      canvas.on("mouse:wheel", function(e) {
        event.preventDefault(); //阻止事件冒泡
        var zoom = (event.deltaY < 0 ? 0.1 : -0.1) + canvas.getZoom();
        zoom = Math.max(0.1, zoom); //最小为原来的1/10
        zoom = Math.min(3, zoom); //最大是原来的3倍
        var zoomPoint = e.pointer;
        canvas.zoomToPoint(zoomPoint, zoom);
      });
      canvas.on({
        "object:moving": updateControls,
        "object:scaling": updateControls,
        "object:resizing": updateControls,
        "object:rotating": updateControls,
        "object:skewing": updateControls
      });
      canvas.on("selection:updated", function(e) {
        if (canvas.getActiveObject() != null) {
          _this.activeobject = null;
          _this.activeobject = e.target;
        }
      });
    });
  }
};
</script>
